<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英语单选题小测验</title>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .quiz-container {
            background-color: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
            font-size: 1.5em;
        }
        .question {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        .question:last-child {
            border-bottom: none;
        }
        .question-text {
            font-weight: bold;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        .options {
            display: flex;
            flex-direction: column;
        }
        .option {
            margin-bottom: 10px;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .option:hover {
            background-color: #f8f9fa;
        }
        .option.selected {
            background-color: #e3f2fd;
            border-color: #2196f3;
        }
        .option.correct {
            background-color: #e8f5e9;
            border-color: #4caf50;
        }
        .option.incorrect {
            background-color: #ffebee;
            border-color: #f44336;
        }
        button {
            display: block;
            width: 100%;
            padding: 12px;
            background-color: #2196f3;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 20px;
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: #1976d2;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 5px;
            text-align: center;
            font-weight: bold;
            display: none;
        }
        .result.good {
            background-color: #e8f5e9;
            color: #2e7d32;
        }
        .result.average {
            background-color: #fff3e0;
            color: #ef6c00;
        }
        .result.poor {
            background-color: #ffebee;
            color: #c62828;
        }
        .explanation {
            margin-top: 10px;
            padding: 10px;
            background-color: #f8f9fa;
            border-left: 4px solid #2196f3;
            font-size: 0.9em;
            line-height: 1.5;
            display: none;
        }
    </style>
</head>
<body>
    <div class="quiz-container">
        <h1>英语单选题小测验</h1>
        
        <div id="quiz">
            <div class="question" data-correct="D">
                <div class="question-text">1. The new policy has ______ a lot of discussion among the public.</div>
                <div class="options">
                    <div class="option" data-value="A">A. raised</div>
                    <div class="option" data-value="B">B. risen</div>
                    <div class="option" data-value="C">C. arisen</div>
                    <div class="option" data-value="D">D. aroused</div>
                </div>
                <div class="explanation">
                    <strong>解析：</strong>本题考查动词辨析。<br>
                    A. raised 是及物动词，意为“举起；提高；筹集”，后常接具体名词。<br>
                    B. risen 是不及物动词，意为“上升”，后不能直接接宾语。<br>
                    C. arisen 是不及物动词，意为“出现，发生”，后不能直接接宾语。<br>
                    D. aroused 是及物动词，意为“引起，激起”，后常接抽象名词，如 discussion（讨论）。<br>
                    句意是“新政策在公众中引起了许多讨论”，且空格后接有宾语，因此需要及物动词，且能搭配抽象名词，故选D。
                </div>
            </div>
            
            <div class="question" data-correct="C">
                <div class="question-text">2. If I ______ you, I would take the job without hesitation.</div>
                <div class="options">
                    <div class="option" data-value="A">A. am</div>
                    <div class="option" data-value="B">B. was</div>
                    <div class="option" data-value="C">C. were</div>
                    <div class="option" data-value="D">D. will be</div>
                </div>
                <div class="explanation">
                    <strong>解析：</strong>本题考查虚拟语气。<br>
                    句子表达的是与现在事实相反的假设（“如果我是你”，但我不是你）。在这种虚拟条件句中，be动词的过去式所有人称都用 <strong>were</strong>。<br>
                    句式为：If + 主语 + 动词过去式 (be动词用were)，主语 + would/could/should + 动词原形。<br>
                    因此，C是唯一正确的选项。
                </div>
            </div>
            
            <div class="question" data-correct="A">
                <div class="question-text">3. It was in the small village ______ we first met each other.</div>
                <div class="options">
                    <div class="option" data-value="A">A. that</div>
                    <div class="option" data-value="B">B. which</div>
                    <div class="option" data-value="C">C. where</div>
                    <div class="option" data-value="D">D. when</div>
                </div>
                <div class="explanation">
                    <strong>解析：</strong>本题考查强调句型。<br>
                    该句是"It is/was ... that ..."的强调句型结构，用来强调地点状语"in the small village"。<br>
                    判断方法：去掉"It was... that..."后，剩余部分“in the small village we first met each other”不是一个完整句子，需要调整语序为“We first met each other in the small village”，这是一个完整正确的句子，证明是强调句。<br>
                    在强调句中，如果被强调的部分是“人”，可以用 who/that；如果被强调的部分是“物”或“状语”（如时间、地点），一律用 <strong>that</strong>。
                </div>
            </div>
            
            <div class="question" data-correct="B">
                <div class="question-text">4. Not until he left the office ______ that he had forgotten his keys.</div>
                <div class="options">
                    <div class="option" data-value="A">A. he realized</div>
                    <div class="option" data-value="B">B. did he realize</div>
                    <div class="option" data-value="C">C. he had realized</div>
                    <div class="option" data-value="D">D. had he realized</div>
                </div>
                <div class="explanation">
                    <strong>解析：</strong>本题考查倒装句。<br>
                    "Not until" 位于句首时，主句需要使用部分倒装结构，即把助动词、情态动词或be动词提到主语之前。<br>
                    原句时态为一般过去时（left），所以主句助动词用 <strong>did</strong>，谓语动词用原形 <strong>realize</strong>，构成倒装 "did he realize"。
                </div>
            </div>
            
            <div class="question" data-correct="A">
                <div class="question-text">5. The manager, together with his team members, ______ working on the project day and night.</div>
                <div class="options">
                    <div class="option" data-value="A">A. is</div>
                    <div class="option" data-value="B">B. are</div>
                    <div class="option" data-value="C">C. have been</div>
                    <div class="option" data-value="D">D. were</div>
                </div>
                <div class="explanation">
                    <strong>解析：</strong>本题考查主谓一致。<br>
                    当主语后跟有 with, together with, along with, as well as 等引导的词组时，谓语动词的数要与这些词组前面的主语保持一致。<br>
                    本句主语是单数 "The manager"，"together with his team members" 是修饰成分，因此谓语动词要用单数形式 <strong>is</strong>。
                </div>
            </div>
        </div>
        
        <button id="submit-btn">提交答案</button>
        
        <div id="result" class="result"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 为每个选项添加点击事件
            const options = document.querySelectorAll('.option');
            options.forEach(option => {
                option.addEventListener('click', function() {
                    const question = this.closest('.question');
                    const allOptions = question.querySelectorAll('.option');
                    
                    // 移除同一问题中其他选项的选中状态
                    allOptions.forEach(opt => {
                        opt.classList.remove('selected');
                    });
                    
                    // 为当前点击的选项添加选中状态
                    this.classList.add('selected');
                });
            });
            
            // 提交按钮事件
            document.getElementById('submit-btn').addEventListener('click', function() {
                let score = 0;
                const questions = document.querySelectorAll('.question');
                const explanations = document.querySelectorAll('.explanation');
                
                // 显示所有题目的解析
                explanations.forEach(explanation => {
                    explanation.style.display = 'block';
                });
                
                // 检查每个问题的答案
                questions.forEach(question => {
                    const correctAnswer = question.getAttribute('data-correct');
                    const selectedOption = question.querySelector('.option.selected');
                    
                    if (selectedOption) {
                        const userAnswer = selectedOption.getAttribute('data-value');
                        const allOptions = question.querySelectorAll('.option');
                        
                        // 标记正确和错误答案
                        allOptions.forEach(option => {
                            if (option.getAttribute('data-value') === correctAnswer) {
                                option.classList.add('correct');
                            } else if (option === selectedOption && userAnswer !== correctAnswer) {
                                option.classList.add('incorrect');
                            }
                        });
                        
                        if (userAnswer === correctAnswer) {
                            score++;
                        }
                    }
                });
                
                // 显示结果
                const resultElement = document.getElementById('result');
                let resultClass = '';
                let message = '';
                
                if (score === 5) {
                    resultClass = 'good';
                    message = `太棒了！您答对了 ${score} 题，满分！`;
                } else if (score >= 3) {
                    resultClass = 'average';
                    message = `不错！您答对了 ${score} 题。`;
                } else {
                    resultClass = 'poor';
                    message = `您答对了 ${score} 题，需要继续加油哦！`;
                }
                
                resultElement.textContent = message;
                resultElement.className = `result ${resultClass}`;
                resultElement.style.display = 'block';
                
                // 滚动到结果区域
                resultElement.scrollIntoView({ behavior: 'smooth' });
            });
        });
    </script>
</body>
</html>